<template>
  <div class="forget_pass">
    <div class="register_top">

    </div>

    <div class="form">
      <div class="form_logo">
        <img src="../../assets/image/login/regilogo.png" alt="">
        <span style="cursor: pointer" @click="$router.go(-1)">返回登录</span>
      </div>

      <div class="register_form" v-if="!resetSuccessfully">
        <h2>找回密码</h2>
        <el-form :model="forgetForm" ref="forgetForm" label-width="1.3rem" class="demo-ruleForm">
          <el-row type="flex" justify="center">
            <el-col :span="10">
              <span style="font-size: 0.14rem; color: #767676">请输入家长手机号</span>
              <el-form-item>
                <img class="line" src="../../assets/image/login/line.png" alt="">
                <el-input ref="phone" style="font-size: 0.2rem" v-model="forgetForm.phone" placeholder="家长手机号" ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="10">
              <el-form-item class="forget_code">
                <img class="line" style="left: 0.9rem" src="../../assets/image/login/line.png" alt="">
                <el-input v-model="forgetForm.code" placeholder="请输入验证码"></el-input>
                <div class="code_btn" :style="{background: (codeNum === '获取验证码'? '' : '#f9f9ff')}" @click="codeBtn">
                  {{ codeNum | codeNum }}
                </div>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-col :span="10">
              <span style="font-size: 0.14rem; color: #767676">新密码</span>
              <el-form-item>
                <img class="line" src="../../assets/image/login/line.png" alt="">
                <el-input style="font-size: 0.2rem" v-model="forgetForm.new_pass" placeholder="请输入新密码"></el-input>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row type="flex" justify="center">
            <el-col :span="10">
              <el-form-item>
                <img class="line" src="../../assets/image/login/line.png" alt="">
                <el-input style="font-size: 0.2rem" v-model="forgetForm.confirm_pass" placeholder="确认密码"></el-input>
              </el-form-item>
              <span style="font-size: 0.14rem; color: #767676">密码要求6-20位....</span>
            </el-col>
          </el-row>
          <el-row type="flex" justify="center">
            <el-col :span="10">
              <div class="forget_btn" @click="forgetBtn">
                提交
              </div>
            </el-col>
          </el-row>

        </el-form>
      </div>
<!--      重置完成-->
      <div class="reset_complete" v-else>
        <div class="complete_tips">
          <img class="tips_img" src="../../assets/image/login/reset.png" alt="">
          <div class="tips_tit">您的密码已重置成功！</div>
          <div class="tips_btn" @click="returnLogin">返回</div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
// 校验手机号
import {isPoneAvailable} from "@/config/utils";
import {replacePage} from "@/config/utils";

export default {
  name: "forgetPass",
  data() {

    return {
      // 验证码倒计时
      codeNum: '获取验证码',
      // 验证码通过
      adoptCode: false,
      // 是否重置成功
      resetSuccessfully: false,
      forgetForm: {
        phone: '',
        code: '',
        new_pass: '',
        // 确认密码
        confirm_pass: ''
      },
    }
  },
  filters: {
    codeNum(num) {
      if (num === '获取验证码') {
        return num
      }
      return num + '秒'
    }
  },
  mounted() {
    this.$refs.phone.focus()
  },
  methods: {
    codeBtn() {
      // 手机号校验
      if (!this.forgetForm.phone) {
        return this.$message({message: '手机号不能为空！', type: 'error'})
      }
      if (!isPoneAvailable(this.forgetForm.phone)) {
        return this.$message({message: '请输入正确的手机号！', type: 'error'})
      }
      // 发送验证码
      this.$request({
        method: 'POST',
        url: 'send_sms',
        data: {
          phone: this.forgetForm.phone,
          name: 'forget_password'
        }
      }).then(({data}) => {
        if (data.code === 200) {
          this.adoptCode = true
          this.$message({message: '信息发送成功！', type: 'success'})
          if (this.codeNum === '获取验证码') {
            this.codeNum = 60
            let codeTime = setInterval(() => {
              this.codeNum -= 1
              if (this.codeNum === 0) {
                clearInterval(codeTime)
                this.codeNum = '获取验证码'
              }
            }, 1000)
          }
        }
      })
    },
    // 提交
    forgetBtn() {
      // 如果验证码通过校验发请求，拦截不必要的请求
      if (this.adoptCode) {
        let {new_pass, confirm_pass, code, phone} = this.forgetForm
        this.$request({
          url: 'forgetPass',
          method: 'POST',
          data: {
            new_pass,
            confirm_pass,
            code,
            phone
          }
        }).then(({data}) => {
          if (data.code === 200) {
            this.$message({message: data.msg, type: 'success'})
            // 删除本地存储所有数据
            this.$store.commit('removeReadingBreadth')
            // 显示重置密码成功弹框
            this.resetSuccessfully = true
          }
        })
        return false
      }
      this.$message({message: '请获取验证码！', type: "warning"})
    },
    // 返回上一页
    returnLogin(){
      replacePage('/login',0)
    }
  }
}
</script>

<style lang="less" scoped>
.forget_pass {
  width: 100vw;
  height: 100vh;

  .register_top {
    height: 4.46rem;
    background: url("../../assets/image/login/registerback.png") no-repeat;
    background-size: 100% 100%;
  }

  .form {
    margin: -3rem auto 0 auto;
    width: 10.68rem;
  }

  .form_logo {
    display: flex;
    justify-content: space-between;
    top: 1.4rem;
    width: 10.68rem;
    height: 0.9rem;
    line-height: 0.9rem;
    font-size: 0.16rem;
    color: #fff;

    & > img {
      width: 2.15rem;
      height: 0.58rem;
    }
  }

  .register_form,
  .reset_complete{
    padding: 0.5rem 0.9rem;
    width: 10.68rem;
    height: 6.16rem;
    box-shadow: 0 3px 24px 0 rgba(179, 183, 236, 0.41);
    border-radius: 0.1rem;
    background: #fff;
    font-size: 0.16rem;
    color: #3F3F3F;
    box-sizing: border-box;

    .el-form-item {
      position: relative;
      margin-bottom: 0 !important;

      .line {
        position: absolute;
        right: 0.4rem;
        top: 0.2rem;
        width: 1rem;
        height: 1px;
        z-index: 10 !important;
      }

      /deep/ .el-input {
        font-size: 0.16rem !important;
        width: 3.43rem !important;
      }
    }

    //验证码框
    .forget_code {
      /deep/ .el-input {
        font-size: 0.16rem !important;
        width: 2.04rem !important;
      }

      .code_btn {
        margin: auto 0 auto 0.1rem;
        width: 1.23rem;
        font-size: 0.16rem;
        height: 0.57rem;
        line-height: 0.57rem;
        text-align: center;
        border-radius: 0.05rem;
        color: #333;
        cursor: pointer;
        border: 2px solid #C9CCED;
      }
    }

    // 提交按钮
    .forget_btn {
      margin-top: 0.1rem;
      width: 3.43rem;
      height: 0.55rem;
      line-height: 0.55rem;
      text-align: center;
      font-size: 0.18rem;
      color: #fff;
      border-radius: 0.1rem;
      background: #414cc2;
      cursor: pointer;
    }
  }

  .reset_complete{
    padding: 2.04rem 0 0 0;
    .complete_tips{
      margin: auto;
      width: 2.8rem;
      height: 4rem;
      font-size: 0.24rem;
      text-align: center;
      .tips_img{
        display: block;
        margin: auto;
        width: 1.1rem;
        height: 1.1rem;
      }
      .tips_tit{
        margin: 0.49rem 0;
      }
      .tips_btn{
        margin: auto;
        width: 1.8rem;
        height: 0.55rem;
        line-height: 0.55rem;
        text-align: center;
        color: #fff;
        font-size: 0.18rem;
        background: #414cc2;
        cursor: pointer;
        border-radius: 0.1rem;
      }
    }
  }
}
</style>
